<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 1.引入 ECharts 文件 -->
    <script src="./assets/lib/echarts/echarts.min.js"></script>
</head>

<body>
    <!-- 2.为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">

        // 3.1 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById('main'));

        // 3.2 指定图表的配置项和数据
        const colors = ['#5470C6', '#EE6666'];
        option = {
            title: {
                text: '薪资 Salary'
            },
            color: colors,
            tooltip: {
                trigger: 'axis',
                //十字准星阴影
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {},
            xAxis: [
                {
                    type: 'category',
                    axisTick: {
                        alignWithLabel: true
                    },
                    axisPointer: {
                        label: {
                            formatter: function (params) {
                                return (
                                    'Precipitation  ' +
                                    params.value +
                                    (params.seriesData.length ? '：' + params.seriesData[0].data : '')
                                );
                            }
                        }
                    },
                    // prettier-ignore
                    data: ['2016-1', '2016-2', '2016-3', '2016-4', '2016-5', '2016-6', '2016-7', '2016-8', '2016-9', '2016-10', '2016-11', '2016-12']
                },
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            dataZoom: [
                {
                    show: true,
                    realtime: true,
                    start: 30,
                    end: 70,
                    xAxisIndex: [0, 1]
                },
                {
                    type: 'inside',
                    realtime: true,
                    start: 30,
                    end: 70,
                    xAxisIndex: [0, 1]
                }
            ],
            series: [
                {
                    name: '期望薪资',
                    //折线
                    type: 'line',
                    //线条圆点的大小
                    symbolSize: 6,
                    //线条圆点样式
                    symbol: 'circle',
                    //线条平滑
                    smooth: true,
                    //聚焦时 另外一条线会淡出
                    emphasis: {
                        focus: 'series'
                    },
                    data: [
                        2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
                    ]
                },
                {
                    name: '实际薪资',
                    type: 'line',
                    smooth: true,
                    symbolSize: 8,
                    symbol: 'circle',
                    emphasis: {
                        focus: 'series'
                    },
                    data: [
                        3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3, 0.7
                    ]
                }
            ]
        };

        // 3.3使用刚指定的配置项和数据显示图表。
        myChart.setOption(option)
    </script>
</body>

</html>